<template>
	<view>
		<page-header :team-id="teamId" :disabled="false" :show-back-button="false">
			<view class="dashboard-row">
				<case-statistics-chart ref="caseStatisticsChart" class="box-card block"></case-statistics-chart>
				<defect-statistics-chart ref="defectStatisticsChart" class="box-card block"></defect-statistics-chart>
				<module-statistics-chart ref="moduleStatisticsChart" class="box-card block"></module-statistics-chart>
				<report-statistics-chart ref="reportStatisticsChart" class="box-card block"></report-statistics-chart>
				<document-statistics-chart ref="documentStatisticsChart" class="box-card block"></document-statistics-chart>
				<member-statistics-chart ref="memberStatisticsChart" class="box-card block"></member-statistics-chart>
			</view>
			<view class="title">
				<text>{{ $t('dashboard.action.title') }}</text>
			</view>
		</page-header>
		<page-body
			@scrolltolower="handlePullRefresher"
			:refresher-enabled="true"
			>
			<template v-slot:content>
				<!-- <view class="dashboard-row">
					<defect-state-chart ref="defectStateChart" class="box-card"></defect-state-chart>
				</view> -->
				<view class="dashboard-row">
					<action-list class="full-row" ref="actionList"></action-list>
				</view>
			</template>
		</page-body>
	</view>
</template>

<script>
	import CaseStatisticsChart from './components/CaseStatisticsChart.vue'
	import DefectStatisticsChart from './components/DefectStatisticsChart.vue'
	import ModuleStatisticsChart from './components/ModuleStatisticsChart.vue'
	import ReportStatisticsChart from './components/ReportStatisticsChart.vue'
	import DocumentStatisticsChart from './components/DocumentStatisticsChart.vue'
	import MemberStatisticsChart from './components/MemberStatisticsChart.vue'
	import ActionList from './components/ActionList.vue'
	// import DefectStateChart from './components/DefectStateChart.vue'
	export default {
		name: 'Dashboard',
		components: { 
			CaseStatisticsChart, 
			DefectStatisticsChart, 
			ModuleStatisticsChart, 
			ReportStatisticsChart, 
			DocumentStatisticsChart, 
			MemberStatisticsChart,
			// DefectStateChart,
			ActionList,
		},
		data() {
			return {
				// 页面传过来的参数
				option: {},
				statusBarHeight: 0
			}
		},
		computed: {
			/** 当前团队ID */
			teamId() {
			    return this.$store.state.user.config.currentTeamId;
			},
			/** 获取当前成员id */
			currentMemberId() {
				return this.$store.state.user.id;
			},
		},
		onLoad(option) {
			this.option = option;
			
			this.statusBarHeight = uni.getWindowInfo().statusBarHeight;
			// #ifndef MP-WEIXIN
			// #endif
		},
		onShow() {
			this.$nextTick(()=>{
				this.handlePullRefresher();
			});
			uni.setTabBarItem({
			  index: 0,
			  text: this.$i18n.t('dashboard'),
			  pagePath: 'pages/system/dashboard/index',
			  iconPath: '/static/images/tabbar/dashboard.png',
			  selectedIconPath: '/static/images/tabbar/dashboard_.png'
			});
			// uni.setTabBarItem({
			//   index: 1,
			//   pagePath: 'pages/system/plan/index',
			//   iconPath: '/static/images/tabbar/plan.png',
			//   selectedIconPath: '/static/images/tabbar/plan_.png',
			//   text: this.$i18n.t('plan'),
			// });
			uni.setTabBarItem({
			  index: 1,
			  pagePath: 'pages/system/defect/index',
			  iconPath: '/static/images/tabbar/bug.png',
			  selectedIconPath: '/static/images/tabbar/bug_.png',
			  text: this.$i18n.t('defect'),
			});
			uni.setTabBarItem({
			  index: 2,
			  pagePath: 'pages/system/defect/index',
			  iconPath: '/static/images/tabbar/project.png',
			  selectedIconPath: '/static/images/tabbar/project_.png',
			  text: this.$i18n.t('project.manage'),
			});
			uni.setTabBarItem({
			  index: 3,
			  pagePath: 'pages/mine/index',
			  iconPath: 'static/images/tabbar/my.png',
			  selectedIconPath: 'static/images/tabbar/my_.png',
			  text: this.$i18n.t('my'),
			});
			
		},
		methods: {
			handlePullRefresher() {
				this.$refs['caseStatisticsChart'].refresh();
				this.$refs['defectStatisticsChart'].refresh();
				this.$refs['moduleStatisticsChart'].refresh();
				this.$refs['reportStatisticsChart'].refresh();
				this.$refs['documentStatisticsChart'].refresh();
				this.$refs['memberStatisticsChart'].refresh();
				// this.$refs['defectStateChart'].refresh();
				this.$refs['actionList'].refresh();
			}
		}
	}
</script>

<style lang="scss" scoped>
.content {
	margin-top: 2rpx;
}
.full-row {
	width: 100%;
}
.dashboard-row {
	width: calc(100% - 20rpx);
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 10rpx 10rpx 10rpx;
	gap: 8rpx;
}
.box-card {
	background-color: $uni-bg-color;
	border-radius: 5rpx;
	width: calc(100% / 2 - 5rpx);
}
.title:hover {
    cursor: pointer;
  }
.title {
	width: calc(100% - 20rpx);
	display: inline-flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx;
	background-color: $uni-bg-color;
	border-radius: 5rpx;
	margin: 0 10rpx 0rpx 10rpx;
	> h1 {
	  flex-shrink: 0;
	}
}
@media screen and (max-width: 530rpx) {
  .box-card {
	  width: calc(100% / 2 - 10rpx) !important;
  }
  // .box-card:nth-child(even) {
  // 	  margin-left: 10rpx;
  // }
  .action-block {
    flex-direction: column-reverse !important;
    > *:first-child {
      width: 100%;
    }
    > .action-right {
      width: 100%;
      flex: 1;
    }
  }
}

@media screen and (max-width: 320px) {
  .box-card {
    width: 100%;
  }
  .action-block {
    > .action-right {
      flex: 0 0 400rpx;
    }
  }
}
</style>